<template>
	<div class="uiue-card">
		<div class="tit">附件</div>
		<a-descriptions class="descri descrisy scro" :column="4" layout="vertical">
			<a-descriptions-item label="网络打通截图" v-if="pzConfig?.intelPassPhoto">
				<div class="img-box">
					<AuthImg class="img-item" v-for="item in JSON.parse(pzConfig?.intelPassPhoto)" :key="item.url"
						:authSrc="item.url" />
				</div>
			</a-descriptions-item>
			<a-descriptions-item label="APP设计页面" v-if="pzConfig?.appDesignPage && tableName === 'PC'">
				<div class="img-box">
					<AuthImg class="img-item" v-for="item in JSON.parse(pzConfig.appDesignPage)" :key="item.url"
						:authSrc="item.url" />
				</div>
			</a-descriptions-item>
			<a-descriptions-item label="PC测试环境测试报告" v-if="pzConfig?.pcTestDoc && tableName === 'PC'">
				<div class="file-box">
					<div v-for="item in JSON.parse(pzConfig.pcTestDoc)" :key="item.url" @click="downloadFile(item)"
						class="file-item">
						<paper-clip-outlined style="margin-right: 5px; cursor: pointer;" />{{ item.name }}
					</div>
				</div>
			</a-descriptions-item>
			<a-descriptions-item label="PC生产环境测试报告" v-if="pzConfig?.pcProdTestDoc && tableName === 'PC'">
				<div class="file-box">
					<div v-for="item in JSON.parse(pzConfig.pcProdTestDoc)" :key="item.url" @click="downloadFile(item)"
						class="file-item">
						<paper-clip-outlined style="margin-right: 5px; cursor: pointer;" />{{ item.name }}
					</div>
				</div>
			</a-descriptions-item>



			<a-descriptions-item label="应用使用界面" v-if="pzConfig?.appInterfacePhoto && tableName === 'APP'">
				<div class="img-box">
					<AuthImg class="img-item" v-for="item in JSON.parse(pzConfig.appInterfacePhoto)" :key="item.url"
						:authSrc="item.url" />
				</div>
			</a-descriptions-item>
			<a-descriptions-item label="联通办公测试环境验证报告" v-if="pzConfig?.ltbgTestUpdateDoc && tableName === 'APP'">
				<div class="file-box">
					<div v-for="item in JSON.parse(pzConfig.ltbgTestUpdateDoc)" :key="item.url"
						@click="downloadFile(item)" class="file-item">
						<paper-clip-outlined style="margin-right: 5px; cursor: pointer;" />{{ item.name }}
					</div>
				</div>
			</a-descriptions-item>
			<a-descriptions-item label="安扫报告" v-if="pzConfig?.anSaoDoc && tableName === 'APP'">
				<div class="file-box">
					<div v-for="item in JSON.parse(pzConfig.anSaoDoc)" :key="item.url" @click="downloadFile(item)"
						class="file-item">
						<paper-clip-outlined style="margin-right: 5px; cursor: pointer;" />{{ item.name }}
					</div>
				</div>
			</a-descriptions-item>
			<a-descriptions-item label="联通办公生产环境变更验证报告" v-if="pzConfig?.ltbgProdUpdateDoc && tableName === 'APP'">
				<div class="file-box">
					<div v-for="item in JSON.parse(pzConfig.ltbgProdUpdateDoc)" :key="item.url"
						@click="downloadFile(item)" class="file-item">
						<paper-clip-outlined style="margin-right: 5px; cursor: pointer;" />{{ item.name }}
					</div>
				</div>
			</a-descriptions-item>
		</a-descriptions>
	</div>
	<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
		<img ref="imgRef" alt="example" style="width: 100%" :src="imageUrl" />
	</a-modal>
</template>

<script setup name="Annex">
import tool from '@/utils/tool'
import AuthImg from '@/components/authImg/index.vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const { tableName } = route.query

const datas = inject('detailDate')
const pzConfig = tableName === 'PC' ? datas.value?.pcPropertiesList[0] : datas.value?.appPropertiesList[0]
const fileUrl = import.meta.env.VITE_FILE_URL
// 应用商店截图
const fileUrlw = import.meta.env.VITE_FILE_URL_W
const imageUrl = ref('')
// 业务部门审核环节有不显示的字段
// const ishs = computed(() => {
// 	return tool.data.get('currentName') === '业务部门审核'
// })
let previewVisible = ref(false)
const handlePreview = (url) => {
	imageUrl.value = url
	previewVisible.value = true
}
const imgRef = ref(null)

const handleCancel = () => {
	previewVisible.value = false
}
const setImgUrl = (url) => {
	let str = ''
	if (url) {
		str = url.includes('http://') ? url : `${fileUrlw}/${url}`
	}
	return str
}
const downloadFile = (item) => {
	if (item) {
		const path = item.url.includes('http://') ? item.url : `${fileUrl}/${item.url}`
		const name = item.name
		const xhr = new XMLHttpRequest()
		xhr.open('get', path)
		xhr.setRequestHeader('Token', tool.data.get('TOKEN'))
		xhr.responseType = 'blob'
		xhr.send()
		xhr.onload = function () {
			if (this.status === 200 || this.status === 304) {
				const fileReader = new FileReader()
				fileReader.readAsDataURL(this.response)
				fileReader.onload = function () {
					const a = document.createElement('a')
					a.style.display = 'none'
					a.href = this.result
					a.download = name
					document.body.appendChild(a)
					a.click()
					document.body.removeChild(a)
				}
			}
		}
	}

}
</script>

<style lang="less" scoped>
.descri {
	margin-top: 10px;
	overflow-y: auto;

	.img-box {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;

		.img-item {
			width: 88px;
			height: 88px;
			cursor: pointer;
		}
	}

	.file-box {

		.file-item {
			color: rgb(89, 89, 89);
			cursor: pointer;
			margin-top: 4px;
		}

		.file-item:hover {
			color: var(--primary-color);
		}
	}

	.file-box :first-child {
		margin-top: 0;
	}
}

.scro::-webkit-scrollbar {
	width: 6px;
	height: 10px;
}

.scro::-webkit-scrollbar-track {
	width: 4px;
	background: rgba(#101F1C, 0.1);
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}

.scro::-webkit-scrollbar-thumb {
	background-color: rgba(144, 147, 153, .5);
	background-clip: padding-box;
	min-height: 28px;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
	transition: background-color .3s;
	cursor: pointer;
}

.scro::-webkit-scrollbar-thumb:hover {
	background-color: rgba(144, 147, 153, .3);
}

.img-sty {
	width: 104px;
	height: 104px;
	cursor: pointer;
}

.content {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: flex-start;
	font-size: 14px;
	margin-top: 8px;
	color: rgb(89, 89, 89);

	div {
		margin-left: 16px;
	}

	&-name {
		color: rgb(50, 110, 255);
	}
}

.btn {
	text-align: right;

	.bt1 {
		margin-right: 10px;
	}
}

.btnposi {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
}

.content :first-child {
	margin-left: 0;
}
</style>
<style>
.tabss .ant-tabs-nav {
	margin: 0;
}

.descrisy .ant-descriptions-item-label {
	color: rgb(40, 40, 40);
	font-family: PingFang SC;
	font-size: 16px;
	font-weight: 600;
	line-height: 28px;
	letter-spacing: 0px;
	text-align: left;
}

.descrisy .ant-descriptions-item-label::after {
	content: '';
}

.descrisy .ant-descriptions-row>th {
	padding-bottom: 12px;
}
</style>
